import moment from 'moment'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import Avatar from '@components/avatar'
import { useSelector } from 'react-redux'
import defaultAvatar from '../../../src/assets/default.png'
const Chat = ({ messagesList }) => {
  const avatar = useSelector((state) => state.auth?.user?.avatar)
  const { getMyProvider } = useSelector((state) => state.provider)
  const providerAvatar = getMyProvider?.avatar
  let previousDate = ''

  return (
    <>
      {messagesList?.length > 0 &&
        messagesList.map((item, index) => {
          const currentDate = moment.unix(item?.created_at).format('MM/DD/YYYY')
          const shouldDisplayDate = currentDate !== previousDate
          previousDate = currentDate

          return (
            <div key={index}>
              {shouldDisplayDate && (
                <div className="chat-message--date">
                  <span>
                    {item?.created_at !== null
                      ? moment.unix(item?.created_at).format('MM/DD/YYYY')
                      : '--'}
                  </span>
                </div>
              )}
              {item.content !== null && (
                <div
                  className={classNames({
                    'image-left-direction mt-1': item.from_type === 0,
                    'image-right-direction mt-1': item.from_type === 1
                  })}
                >
                  <section className="chat-box-div">
                    {item.from_type === 0 ? (
                      <Avatar
                        img={providerAvatar ? providerAvatar : defaultAvatar}
                        imgHeight="40"
                        imgWidth="40"
                        // status="offline"
                        className="avatar-image-chatbox"
                      />
                    ) : (
                      <Avatar
                        img={avatar ? avatar : defaultAvatar}
                        imgHeight="40"
                        imgWidth="40"
                        // status="offline"
                        className="avatar-image-chatbox"
                      />
                    )}
                    <div>
                      <section
                        key={index}
                        className={classNames({
                          'receiver-message-box': item.from_type === 0,
                          'sender-message-box': item.from_type === 1
                        })}
                      >
                        <div
                          className={classNames({
                            'receiver-message-box--div': item.from_type === 0,
                            'sender-message-box--div': item.from_type === 1
                          })}
                          dangerouslySetInnerHTML={{
                            __html: item.content || item.message
                          }}
                        />

                        <div
                          className={classNames({
                            'receiver-message-box--time': item.from_type === 0,
                            'sender-message-box--time': item.from_type === 1
                          })}
                        >
                          <span>
                            {item?.created_at !== null
                              ? moment.unix(item?.created_at).format('hh:mm A')
                              : moment().format('hh:mm A')}
                          </span>
                        </div>
                      </section>
                    </div>
                  </section>
                </div>
              )}

              {item.files?.length > 0 &&
                item.files.map((val, i) => (
                  <div
                    key={i}
                    className={classNames({
                      'image-left-direction mt-1': item.from_type === 0,
                      'image-right-direction mt-1': item.from_type === 1
                    })}
                  >
                    <section className="chat-box-div">
                      {item.from_type === 0 ? (
                        <Avatar
                          img={providerAvatar ? providerAvatar : defaultAvatar}
                          imgHeight="40"
                          imgWidth="40"
                          // status="offline"
                          className="avatar-image-chatbox"
                        />
                      ) : (
                        <Avatar
                          img={avatar ? avatar : defaultAvatar}
                          imgHeight="40"
                          imgWidth="40"
                          // status="offline"
                          className="avatar-image-chatbox"
                        />
                      )}
                      <div>
                        <section
                          key={index}
                          className={classNames({
                            'receiver-message-box': item.from_type === 0,
                            'sender-message-box': item.from_type === 1
                          })}
                        >
                          <div
                            className={classNames({
                              'receiver-message-box--div': item.from_type === 0,
                              'sender-message-box--div': item.from_type === 1
                            })}
                          >
                            <a
                              target=""
                              href={val?.message_file || null}
                              className="black hover-black"
                            >
                              {val?.file_name}
                            </a>
                          </div>

                          <div
                            className={classNames({
                              'receiver-message-box--time':
                                item.from_type === 0,
                              'sender-message-box--time': item.from_type === 1
                            })}
                          >
                            <span>
                              {item?.created_at !== null
                                ? moment
                                    .unix(item?.created_at)
                                    .format('hh:mm A')
                                : moment().format('hh:mm A')}
                            </span>
                          </div>
                        </section>
                      </div>
                    </section>
                  </div>
                ))}
            </div>
          )
        })}
    </>
  )
}

export default Chat

Chat.propTypes = {
  isSender: PropTypes.bool,
  messages: PropTypes.arrayOf(
    PropTypes.shape({ msg: PropTypes.string, time: PropTypes.string })
  )
}
